<!--
 * @Description: 图片上传组件 - 多图可拖动
 * @Author: liyujie
 * @Date: 2021/05/14
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/14
-->
<template>
    <section class="image-upload-multiple-wrapper">
        <!-- 图片预览 -->
        <div class="image-wrapper">
            <div class="image-list">
                <draggable
                    v-model="imageList"
                    draggable=".image-item"
                    style="display: flex; flex-wrap: wrap"
                    :disabled="type === 'detail' || !draggable"
                    @change="$message.success('排序成功')"
                >
                    <div
                        class="image-item"
                        v-for="(item,index) in imageList"
                        :key="index"
                    >
                        <img :src="item">
                        <div class="img-action">
                            <i
                                class="el-icon-zoom-in"
                                @click="fnShowPreview(imageList, index)"
                            />
                            <i
                                class="el-icon-delete"
                                @click="handleDeleteImage(index)"
                                v-if="type !== 'detail'"
                            />
                        </div>
                    </div>
                    <el-upload
                        action="noAction"
                        :show-file-list="false"
                        :http-request="handleUploadImage"
                        :before-upload="beforeUploadImage"
                        accept="image/*"
                        :limit="9"
                        multiple
                        ref="uploader"
                        v-if="imageList.length < 9"
                        :disabled="type === 'detail'"
                    >
                        <div class="uploader-customer image-item">
                            <i class="el-icon-plus"/>
                            <div class="upload-text">{{ text }}</div>
                        </div>
                    </el-upload>
                </draggable>
            </div>
            <div
                class="tips"
                v-if="tips"
            >
                <slot
                    name="tips"
                    v-if="$slots.tips"
                />
                <span v-else>{{ tips }}</span>
            </div>
        </div>
        <img-preview ref="preview"/>
    </section>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import draggable from 'vuedraggable';
export default {
    name: 'ImageUploadMultiple',
    props: {
        type: {
            type: String,
            default: 'add'
        },
        draggable: {
            type: Boolean,
            default: true
        },
        images: {
            type: Array,
            default: () => {
                return [];
            }
        },
        tips: {
            type: String,
            default: ''
        },
        limitType: {
            type: String,
            default: 'KB'
        },
        limit: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 9
        },
        text: {
            type: String,
            default: '添加图片'
        }
    },
    model: {
        prop: 'images',
        event: 'change'
    },
    computed: {
        imageList: {
            get() {
                return this.images;
            },
            set(val) {
                this.$emit('change', val);
            }
        }
    },
    data() {
        return {};
    },
    components: {
        imgPreview,
        draggable
    },
    mounted(){},
    methods:{

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt;

            if(this.limit === 0) {
                isLt = true;
            } else if(this.limitType === 'MB') {
                isLt = file.size / 1024 / 1024 < this.limit;
            } else {
                isLt = file.size / 1024 < this.limit;
            }

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if (!isLt) {
                this.$notify({
                    title: '提示',
                    message: `图片大小不能超过${this.limit}${this.limitType}`,
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt;
        },

        /**
         * 上传图片
         * @param e
         * @returns {boolean}
         */
        handleUploadImage(e) {
            this.uploadImage(e, (resp) => {
                if(this.imageList.length >= this.max) {
                    this.$message.warning(`最多可上传${this.max}张`);
                    return false;
                }
                this.imageList.push(resp.data.url);
                // this.$emit('change', this.imageList);
                if(this.$refs.uploader) {
                    this.$refs.uploader.uploadFiles = [];
                }
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        /**
         * 上传图片
         * @param e
         * @param success
         * @param error
         */
        uploadImage(e, success, error) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code === 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        /**
         * 删除上传的图片
         * @param index
         */
        handleDeleteImage(index) {
            this.imageList.splice(index, 1);
            if(this.$refs.uploader) {
                this.$refs.uploader.uploadFiles = [];
            }
        },
    }
};
</script>

<style scoped lang="less">
.image-upload-multiple-wrapper {
    .image-wrapper {
        margin-top: 12px;
        .el-icon-plus {
            font-size: 24px;
        }
        .tips {
            word-wrap: break-word;
            word-break: normal;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            color: #999999;
        }
        .uploader-customer {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #999;
            padding-top: 12px;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            border: 1px dashed #aaa;
        }
        .image-item {
            width: 100px;
            height: 100px;
            overflow: hidden;
            border-radius: 4px;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }

            .img-action {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                width: 100px;
                height: 100px;
                border-radius: 4px;
                background: rgba(0, 0, 0, .6);
                justify-content: center;
                align-items: center;
                display: none;

                i {
                    color: #ffffff;
                    font-size: 17px;
                    cursor: pointer;
                }

                .el-icon-delete {
                    margin-left: 17px;
                }
            }

            &:hover {
                .img-action {
                    display: flex;
                }
            }
        }
    }
}
</style>
